<template>
  <div>
    <div
      class="header-screen"
      v-if="!isFullScreen"
      @click="fullScreen"
    >
      <a-icon type="fullscreen" />
    </div>
    <div
      class="header-screen"
      @click="exitFullscreen"
      v-else
    >
      <a-icon type="fullscreen-exit" />
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderScreen",
  data() {
    return {
      isFullScreen: false,
    };
  },
  methods: {
    fullScreen() {
      const element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
  },
  mounted() {
    window.onresize = () => {
      const isFull = !!(
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      );
      if (isFull == false) {
        this.isFullScreen = false;
      } else {
        this.isFullScreen = true;
      }
    };
  },
};
</script>

<style lang="less">
.header-screen {
  .screen-icon {
    font-size: 16px;
    cursor: pointer;
  }
}
</style>
